<template>
  <demoBlock title="懒加载" class="demo-swipe">
    <vcu-swipe :autoplay="3000" lazy-render>
      <vcu-swipe-item v-for="(item, index) in images" :key="index">
        <img :src="item" />
      </vcu-swipe-item>
    </vcu-swipe>
  </demoBlock>
</template>
<script>
import { defineComponent, getCurrentInstance } from "vue";
export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance();
    const images = [
      `${proxy.serverIp}/images/car.jpg`,
      `${proxy.serverIp}/images/j20.jpg`,
      `${proxy.serverIp}/images/588ku.jpg`,
      `${proxy.serverIp}/images/om.jpg`,
    ];

    return {
      images,
    };
  },
});
</script>

<style lang="less" scoped>
.demo-swipe {
  .vcu-swipe-item {
    text-align: center;
    img {
      width: 100%;
      height: 200px;
    }
  }
}
</style>
